<template>
	<view class="main">
		<u-navbar back-text="" slot="center" :autoBack="true" safeAreaInsetTop placeholder>
			<view slot="center" class="leftText">完善个人信息</view>
		</u-navbar>
		<view class="form-lst v-box">
			<u--form :model="FormData" ref="form1" :label-style="{'font-size':'28rpx;'}">
			<view class="form-item noh1 poser" @click="unloads">
				<view class="itemimg-label">头像</view>
				<view class="item-imglst dis-row">
					<image class="icon" :src="FormData.avatar?FormData.avatar:'http://xgr.oss-cn-hangzhou.aliyuncs.com/icon/images/default-avatar.png'"></image>
				</view>
			</view>
			<view class="form-item noh2 poser">
				<view class="item-label">姓名</view>
				<view class="item-input">
					<input type="text" v-model="FormData.nickName" class="input-sc" placeholder="请输入姓名"/>
				</view>
			</view>
			<view class="form-item noh2 poser">
				<view class="item-label">性别</view>
				<view class="item-input dis-row">
					<radio-group @change="radioChange" class="dis-row radiolst">
						<view class="rdio dis-row" v-for="(item, index) in sexRedo" :key="item.value">
							<view>
								<radio :value="item.value" :checked="item.value === current" />
							</view>
							<view>{{item.name}}</view>
						</view>
					</radio-group>
				</view>
			</view>
			
			<u-form-item label="民族" labelWidth="100" @click="nationShow = true" borderBottom>
				<u--input v-model="FormData.nationName" inputAlign="right" fontSize='14' border="none" disabledColor="none" disabled></u--input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
			
			<u-form-item label="出生日期" labelWidth="100" @click="dateShow = true" borderBottom>
				<u--input v-model="FormData.birthDate" inputAlign="right" fontSize='14' border="none" disabledColor="none" disabled></u--input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
			
			<u-form-item label="人员构成" labelWidth="100" @click="checkperson()" borderBottom>
				<u--input v-model="FormData.staffTypeName" inputAlign="right" fontSize='14' border="none" disabledColor="none" disabled></u--input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
			
			<u-form-item label="人员数量" labelWidth="100" v-if="people==true" @click="checkallocation()" borderBottom>
				<u--input v-model="FormData.peopleNumName" inputAlign="right" fontSize='14' border="none" disabledColor="none" disabled></u--input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
			
			<u-form-item label="工龄" labelWidth="100"  borderBottom>
				<!-- #ifndef APP-NVUE -->
				<u-input placeholder="请输入工龄" v-model="FormData.workYear" fontSize='14' inputAlign="right" border="none">
				<!-- #endif -->
				<!-- #ifdef APP-NVUE -->
				<u--input placeholder="请输入工龄" v-model="FormData.workYear" fontSize='14' inputAlign="right" border="none">
				<!-- #endif -->
					<template slot="suffix">年</template>
				<!-- #ifndef APP-NVUE -->
				</u-input>
				<!-- #endif -->
				<!-- #ifdef APP-NVUE -->
				</u--input>
				<!-- #endif -->
			</u-form-item>
			<u-form-item label="熟练度" labelWidth="100" @click="checkmastery()" borderBottom>
				<u--input v-model="FormData.masteryName" inputAlign="right" fontSize='14' border="none" placeholder="请选择" disabledColor="none" disabled></u--input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
			<view class="send-button">
				<button type="primary" keyName="name" @click="sendPost">确定</button>
			</view>
			</u--form>
			<u-picker :show="nationShow" ref="uPicker" :columns="nation"
				@cancel="noveOut"
				@confirm="nationConfirm"
				@change="nationChange"></u-picker>
			<u-datetime-picker
					:show="dateShow"
					v-model="value1"
					:minDate='0'
					mode="date"
					@confirm="dateConfirm"
					@cancel="dateCancel"
					:formatter="formatter"
			></u-datetime-picker>
		</view>
		
		<pop ref="minzu" :direction="direction" :is_close="true" :is_mask="true" :width="100">
			<view class="new-del">
				 <view class="minzu-Name">选择民族</view>
				 <view class="minzu-lst" v-for="(n,v) in nation" :key="v">{{n.name}}</view>
			</view>
		</pop>
		
		<!--人员构成-->
		<pop ref="person" :direction="direction" :is_close="true" :is_mask="true" :width="100">
			<view class="popOption">
				<view class="title">人员构成</view>
				<view class="option">
					<view
						v-for="(uv,ui) in personList" 
						:key="ui" 
						:class="{'active':FormData.staffType === uv.id}" 
						@click="personChange(uv)">{{uv.name}}</view>
				</view>
				<view class="define">
					<view @click="personDefine()">确定</view>
				</view>
			</view>
		</pop>
		
		<!--熟练度-->
		<pop ref="mastery" :direction="direction" :is_close="true" :is_mask="true" :width="100">
			<view class="popOption">
				<view class="title">熟练度</view>
				<view class="option">
					<view
						v-for="(uv,ui) in masteryList" 
						:key="ui" 
						:class="{'active':FormData.mastery === uv.id}" 
						@click="masteryChange(uv)">{{uv.name}}</view>
				</view>
				<view class="define">
					<view @click="masteryDefine()">确定</view>
				</view>
			</view>
		</pop>
		
		<!--人员数量-->
		<pop ref="allocation" :direction="direction" :is_close="true" :is_mask="true" :width="100">
			<view class="popOption">
				<view class="title">人员数量</view>
				<view class="option">
					<view
						v-for="(uv,ui) in allocationList" 
						:key="ui" 
						:class="{'active':FormData.peopleNum === uv.id}" 
						@click="allocationChange(uv)">{{uv.name}}人</view>
				</view>
				<view class="define">
					<view @click="allocationDefine()">确定</view>
				</view>
			</view>
		</pop>
	</view>
</template>

<script>
import Index from "@/common/index-model.js"	
import pop from "@/components/ming-pop/ming-map.vue"
import fun from "@/common/publicFun.js"	
let index = new Index()
let that = null
export default {
	data() {
		return {
			direction:'below',
			sexRedo:[
				{name:'男',value:1},
				{name:'女',value:0},
			],
			nationShow: false,
			dateShow: false,
			nation: [],
			nationArr:[],
			personList:[],//人员构成
			masteryList:[],//熟练度
			allocationList:[],
			FormData:{
				nickName:'',
				gender:1,
				nation:'',
				nationName:'',
				birthDate:'',
				mobile:'',
				avatar:'',
				mastery:'',
				masteryName:'',
				staffType:'',
				staffTypeName:'',
				workYear:'',
				peopleNum:'',
				peopleNumName:'',
			},
			people:false,
			current:1,
			value1:Number(new Date()),
			myCard:{},
		}
	},
	components:{
		pop
	},
	methods:{
		//获取人员数量
		getAllocationList() {
			index.getPublicUserMember({},'/client/public/find/personnel/allocation','get',res=>{
				if(res.data.code == 200 && res.data.success){
					this.allocationList=res.data.result;
				}
			})
		},
		checkallocation(){
			this.$refs.allocation.show();
		},
		allocationChange(item){
			this.FormData.peopleNum=item.id;
			this.FormData.peopleNumName=item.name;
		},
		allocationDefine(){
			this.$refs.allocation.close();
		},
		
		//获取人员构成
		getPersonList() {
			index.getPublicUserMember({},'client/public/find/staff','get',res=>{
				if(res.data.code == 200 && res.data.success){
					this.personList=res.data.result;
				}
			})
		},
		checkperson(){
			this.$refs.person.show();
		},
		personChange(item){
			this.FormData.staffType=item.id;
			this.FormData.staffTypeName=item.name;
		},
		personDefine(){
			if(this.FormData.staffType==1){
				this.people=false;
			}else{
				this.people=true;
			}
			this.$refs.person.close();
		},
		//获取熟练度
		getMasteryList() {
			index.getPublicUserMember({},'/client/public/find/mastery','get',res=>{
				if(res.data.code == 200 && res.data.success){
					this.masteryList=res.data.result;
				}
			})
		},
		checkmastery(){
			this.$refs.mastery.show();
		},
		masteryChange(item){
			this.FormData.mastery=item.id;
			this.FormData.masteryName=item.name;
		},
		masteryDefine(){
			this.$refs.mastery.close();
		},
		unloads() {
			//选择图片
			uni.chooseImage({
				count: 1,
				sizeType: ['original', 'compressed'], //original原图  compressed压缩
				sourceType: ['album', 'camera'], //album 相册  camera 相机
				success: (imgres) => {
					//console.log(imgres, '==img===')
					let resimg = imgres.tempFilePaths; //获取返回的文件数据
					//执行上传图片
					uni.uploadFile({
						url: index.img_url+'client/public/upload?type=headPicture&file='+resimg,
						filePath: resimg[0],
						name: 'file',
						FormData: {
							user: 'test'
						},
						header: {
							'X-Access-Token':uni.getStorageSync('token'),
							'Login-Type':'client'
						},
						success: (res) => {
							console.log(res,'=====imgres====')
						     //this.faceurl=JSON.parse(cmsres.data).data.imgurl
							let imgurl = JSON.parse(res.data).result.url
							this.FormData.avatar = imgurl
						},
						fail: (err) => {
							console.log(err);
						}
					})
				}
			}); //选择图片结束
		},
		getCardDetail(){
			index.getPublicUserMember({},'/client/card/detail','get',res=>{
				if(res.data.code == 200 && res.data.success){
					let data=res.data.result;
					this.FormData.mastery=data.mastery;
					this.FormData.masteryName=data.masteryStr;
					this.FormData.staffType=data.staffType;
					this.FormData.staffTypeName=data.staffTypeStr;
					this.FormData.workYear=data.workYear;
					this.FormData.peopleNum=data.peopleNum;
					this.FormData.peopleNumName=data.peopleNumStr;
					if(data.staffType==1){
						this.people=false;
					}else{
						this.people=true;
					}
					this.myCard=data;
				}
			})
			
		},
		nationChange(e) {
			console.log(e,'======e======')
		},
		nationConfirm(e){
			this.FormData.nation = this.nationArr[e.indexs[0]].id
			this.FormData.nationName  =this.nationArr[e.indexs[0]].name
			this.nationShow=false;
		},
		noveOut(e){
			this.nationShow=false;
			
		},
		dateConfirm(e){
			this.FormData.birthDate=fun.timestampToTime(e.value,'-');			
			this.dateShow=false;
		},
		dateCancel(e){
			this.dateShow=false;
		},
		formatter(type, value) {
			if (type === 'year') {
				return `${value}年`
			}
			if (type === 'month') {
				return `${value}月`
			}
			if (type === 'day') {
				return `${value}日`
			}
			return value
		},
		radioChange(e) {
			console.log(e.detail.value);
			for(let i = 0;i<this.sexRedo.length;i++){
				if(this.sexRedo[i].value == e.detail.value){
					this.current = this.sexRedo[i].value;
					this.FormData.gender=e.detail.value;
					break;
				}
			}
		},
		getNation(){
			index.getPublicUserMember({},'client/public/find/nationList','get',res=>{
				this.nationArr=res.data.result
				let temp=[]
				for(let i=0;i<this.nationArr.length;i++){
					temp.push(this.nationArr[i].name)
				}
				this.nation.push(temp)
			})
		},
		sendPost(){
			if(!this.FormData.nickName){
				index.show_tips('请输入您的姓名')
				return
			}
			if(!this.FormData.nation){
				index.show_tips('请选择民族')
				return
			}
			if(!this.FormData.birthDate){
				index.show_tips('请选择出生日期')
				return
			}
			if(!this.FormData.staffType){
				index.show_tips('请选择人员构成')
				return
			}
			if(this.FormData.staffType!=1 && !this.FormData.peopleNum){
				index.show_tips('请选择人员数量')
				return
			}
			if(!this.FormData.workYear){
				index.show_tips('请输入您的工龄')
				return
			}
			if(!this.FormData.nation){
				index.show_tips('请选择您的熟练度')
				return
			}
			let sends={
				"nickName":this.FormData.nickName,
				"gender":this.FormData.gender,
				"nation":this.FormData.nation,
				"birthDate":this.FormData.birthDate,
				"mobile":this.FormData.mobile,
				"avatar":this.FormData.avatar
			}
			index.getPublicUserMember(sends,'/client/individual/information','post',res=>{
			})
			let mpsends={
				'mastery':this.FormData.mastery,
				'staffType':this.FormData.staffType,
				'workYear':this.FormData.workYear,
				'peopleNum':this.FormData.peopleNum
			}
			index.getPublicUserMember(mpsends,'/client/card/modify','post',res=>{
				if(res.data.code == 200 && res.data.success){
					index.show_tips('操作成功')
					setTimeout(()=>{
						index.navigate_back(1)
					},500)
				}else{
					index.show_tips(res.data.message);
					return false
				}
			})
		},
		getUserInfo(){
			index.getPublicUserMember({},'client/individual/select/information','post',res=>{
				console.log(res,'-----------------');
				if(res.data.code == 200 && res.data.success){
					this.FormData.nickName=res.data.result.nickName;
					this.FormData.gender=res.data.result.gender;
					this.FormData.mobile=res.data.result.mobile;
					this.FormData.nation=res.data.result.nation;
					this.FormData.nationName=res.data.result.nationStr;
					this.FormData.birthDate=res.data.result.birthDate;
					this.current=res.data.result.gender;
					this.FormData.avatar=res.data.result.avatar;
				}else{
					index.show_tips(res.data.message);
					return false
				}
			})
			
		},
	},
	onLoad() {
		if(!uni.getStorageSync('token')){
			index.navigate_to('/pagesC/login/login')
		}
		this.getNation();
		this.getUserInfo();
		this.getCardDetail();
		this.getMasteryList();
		this.getPersonList();
		this.getAllocationList();
	}
}
</script>

<style>
@import url("@/static/css/publics.css");
@import url("@/static/css/myedituserinfo.css");	
</style>